<!-- 设备参数 -->
<template>
  <div class="equip-wrap-common">
    <px-table :data="tableData" class="equip-table" size="small" border>
      <px-table-column type="index" label="序号" align="center" fixed="left" />
      <px-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :label="item.label"
        :min-width="item.minWidth"
        :align="item.align"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :fixed="item.fixed"
      >
        <template #default="scope">{{
          scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
        }}</template>
      </px-table-column>
    </px-table>
  </div>
</template>

<script setup lang="ts">
import { equipmentAttribute } from "@/api/equip/archive";
import { reactive, toRefs, watchEffect } from "vue";

// 父级传过来的值
const props = defineProps(["eqpId", "activeName"]);

const state = reactive<any>({
  tableColumns: [
    { prop: "attributeName", label: "参数名称", minWidth: "140", showOverflowTooltip: true },
    { prop: "attributeValue", label: "参数值", minWidth: "140", showOverflowTooltip: true },
    { prop: "valueUnitDesc", label: "单位", minWidth: "140", showOverflowTooltip: true },
    { prop: "remark", label: "备注信息", minWidth: "140", showOverflowTooltip: true }
  ],
  tableData: []
});
const { tableColumns, tableData } = toRefs(state);

watchEffect(async () => {
  if (props.activeName === "params") {
    const res = await equipmentAttribute({ attributeType: "STATIC", eqpId: props.eqpId });
    tableData.value = res;
  }
});
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");

.equip-wrap-common {
  box-sizing: border-box;
  height: calc(100vh - 278px);
  padding: 0;
  margin-top: 10px;
}
</style>
